<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2024/3/16
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="staffForm" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="staffForm.staffId" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="staffForm.staffName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="选择分店">
            <el-select v-model="staffForm.branchId" placeholder="选择分店">
                <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="staffs"
            border
            style="width: 100%">
        <el-table-column
                prop="staffid"
                label="员工编号"
        >
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
        >
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码">
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职日期">
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店名">
        </el-table-column>
        <el-table-column
                prop="role.rolename"
                label="职务名称">
        </el-table-column>
        <el-table-column
                prop="dept.deptname"
                label="部门名称">
        </el-table-column>
        <el-table-column
                prop="dept.remark"
                label="职位描述">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.state==1"
                        effect="dark">
                    工作状态
                </el-tag>
                <el-tag
                        type="info"
                        v-else
                        effect="dark">
                    冻结状态
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
     let app=new Vue({
          el:"#app",
          data:{
              //搜索表单对象
              staffForm:{},
              //员工表格的数据
              staffs:[],
              //当前的页码
              current:1,
              //每页的条数
              pageSize:5,
              //总条数
              total:0,
              //所有店铺的信息
              branchs:[],
          },
         created(){
             this.loadTable();
             this.loadBranch();
         },
         methods:{
              //加载所有店铺
             loadBranch(){
                axios.get("/branch/list").then(result=>{
                     this.branchs=result.data.data;
                })
             },
             //搜索事件
             search(){
                this.current=1;
                this.loadTable()
             },
              //初始化员工表格数据
             loadTable(){
                axios.post("/staff/list/"+this.current+"/"+this.pageSize,this.staffForm).then(result=>{
                     this.staffs=result.data.data.list;
                     this.total=result.data.data.total;
                })
             },


             handleSizeChange(val) {
                 this.pageSize=val;
                 this.loadTable();
             },
             handleCurrentChange(val) {
                 this.current=val;
                 this.loadTable();
             },
         }
     })
</script>
</html>
